<!-- Simple two line list -->
<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
    <li class="list-group-item">
        <h3 class="list-group-item-heading">Two-line item</h3>
        <span class="list-group-item-text">Secondary text</span>
    </li>
    <li class="list-group-item">
        <h3 class="list-group-item-heading">Two-line item</h3>
        <span class="list-group-item-text">Secondary text</span>
    </li>
    <li class="list-group-item">
        <h3 class="list-group-item-heading">Two-line item</h3>
        <span class="list-group-item-text">Secondary text</span>
    </li>
</ul>

<!--Two line list with icons --> 
<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
    <li class="list-group-item">
        <i class="material-icons media-left media-middle">mood</i> 

        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Secondary text</span>
        </div>
    </li>
    <li class="list-group-item">
        <i class="material-icons media-left media-middle">notifications</i> 
        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Secondary text</span>
        </div>
    </li>
    <li class="list-group-item">
        <i class="material-icons media-left media-middle">share</i> 
        <div class="media-body">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Secondary text</span>
        </div>
    </li>
</ul>

<!-- Two line list with avatar -->
<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
    <li class="list-group-item">
        <div class="media-left">
            <a class="avatar-list-img avatar-list-img-custom" href="javascript:void(0);">
                <img data-holder-rendered="true" src="https://opensource.propeller.in/components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40">
            </a>
        </div>
        <div class="media-body media-middle">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Secondary text</span>
        </div>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a class="avatar-list-img avatar-list-img-custom" href="javascript:void(0);">
            <img data-holder-rendered="true" src="https://opensource.propeller.in/components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40">
        </a>
        </div>
        <div class="media-body media-middle">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Secondary text</span>
        </div>
    </li>
    <li class="list-group-item">
        <div class="media-left">
            <a class="avatar-list-img avatar-list-img-custom" href="javascript:void(0);">
               <img data-holder-rendered="true" src="https://opensource.propeller.in/components/list/img/40x40.png" class="img-responsive" data-src="holder.js/40x40" alt="40x40">
            </a>
        </div>
        <div class="media-body media-middle">
            <h3 class="list-group-item-heading">Two-line item</h3>
            <span class="list-group-item-text">Secondary text</span>
        </div>
    </li>
</ul>
